<template>
	<view :style="{paddingBottom: paddingBottom + 50 +'px'}" class="topicBox">
		<Special :list="SpecialList"></Special>
		<tobBar :current="1"></tobBar>
		<view class="buttomFyBox">
			<u-button type="default" :customStyle="{color:page<=1?'#333':'#8b0000',width:'180px'}"
				:color="page<=1?'#f3f3f4':'#ffffff'" @click="BackFn(-1)">上一页
			</u-button>
			<u-button type="default" :customStyle="{color:page>=totalPages?'#333':'#8b0000',width:'180px'}"
				:color="page>=totalPages?'#f3f3f4':'#ffffff'" @click="nextFn(1)" hoverStayTime="0">下一页
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		topicListAPI
	} from "../request/api.js"
	import request from "../request/request.js"
	import SIZE from "@/config/config.js"
	export default {
		data() {
			return {
				SpecialList: [],
				paddingBottom: 0,
				page: 1,
				totalPages: 0
			}
		},
		methods: {
			BackFn(num) {
				if (this.page == 1) {
					return this.page
				} else {
					this.page += num
					uni.pageScrollTo({
						scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
						duration: 0 // 滚动动画的时长
					})
				}
				this.getDataFn(this.page, SIZE)
			},
			nextFn(num) {
				if (this.page < this.totalPages) {
					this.page += num
					uni.pageScrollTo({
						scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
						duration: 0 // 滚动动画的时长
					})
				} else {
					return this.page
				}
				this.getDataFn(this.page, SIZE)
			},
			getDataFn(page, size) {
				request({
					url: topicListAPI,
					data: {
						page,
						size
					},
					successCb: res => {
						this.SpecialList = res.data
						this.totalPages = res.totalPages
					}
				})
			}
		},
		onLoad() {
			this.getDataFn(this.page, SIZE)
			const app = getApp();
			const bottomFixedNeeded = app.globalData.bottomFixedNeeded;
			const bottomDistance = app.globalData.bottomDistance;
			if (bottomFixedNeeded) {
				this.$data.paddingBottom = 52 + bottomDistance;

			} else {
				this.$data.paddingBottom = 52;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topicBox {
		background-color: #efefef;
	}

	.buttomFyBox {
		display: flex;
		justify-content: space-between;
		padding: 0 8rpx;
		margin-top: 44rpx;

		// .custom-style {
		// 	padding-right: 10rpx;
		// 	width: calc(50vw-10px);
		// 	color: gray;
		// }

	}

	.custom-style {
		color: #ccc;
	}
</style>
